<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>我的订单</title>
		<meta name="keywords" content="KEYWORDS..." />
		<meta name="description" content="DESCRIPTION..." />
		<meta name="author" content="DeathGhost" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name='apple-touch-fullscreen' content='yes'>
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/reset.css">
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/style.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/css/swiper3.07.min.css" />
		<link rel="stylesheet" type="text/css" href="__STATIC__/home/layui/css/layui.css" />
		<style>
			.tab {top: 0;}
			.my-order-iphone1 {margin-top: 4%;}
			.addclasstruenav{color: #3acd17;}
			
		</style>
	</head>

	<body class="padd_40">	
		<div class="tab">
			<a href="javascript:;" class="active">待付款</a>
			<a href="javascript:;">待接受</a>
			<a href="javascript:;">待发货</a>
			<a href="javascript:;">待收货</a>
			<a href="javascript:;">已取消</a>
			<a href="javascript:;">已完成</a>
			<div class="clearfix"></div>
		</div>
		<div class="swiper-container" style="margin-top: -40px;" >
			<div class="swiper-wrapper w">
				<div class="swiper-slide d">
					<div class="swiper-container2">
						<div class="swiper-wrapper">
							<div class="swiper-slide list-group">
								{volist name="order_list1" id="one"}
								<ul>
									<li class="bor-bottom5-f1 bg-fff padb03">
										<div class="order-details-header">
											<div class="order-det-logo fl"><img src="__STATIC__/home/img/logo.jpg"></div>
											<div class="order-det-time fl">
												<h4>快乐小吃店</h4>
												<p>{$one.should_paytime|date="Y-m-d",###}</p>
											</div>
											<div class="my-order-iphone1 fr f032 text-right">
												<h4 class="f029">￥{$one.sumprice}</h4>
												<p class="f02 color999">订单号：{$one.order_str}</p>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="commodity-name f032">
											<ul>
												<li>
													{volist name="$one.food_list" id="el"}
														<span>{$el[0]}<em>×</em>{$el[1]}</span>--
													{/volist}
												</li>
												
												<div class="clearfix"></div>
											</ul>
										</div>
										<div class="bg-fff pay-button-myorder">
											<button class="bg99" onclick="delOrder({$one.id});">取消</button>
											<button class="bg26c400" onclick="confirmOrder({$one.id});">去付款</button>
										</div>
									</li>
								</ul>
								{/volist}
							</div>
							<div class="swiper-slide list-group">
								{volist name="order_list6" id="one"}
								<ul>
									<li class="bor-bottom5-f1 bg-fff">
										<div class="order-details-header">
											<div class="order-det-logo fl"><img src="__STATIC__/home/img/logo.jpg"></div>
											<div class="order-det-time fl">
												<h4>快乐小吃店</h4>
												<p>{$one.should_paytime|date="Y-m-d",###}</p>
											</div>
											<div class="my-order-iphone1 fr f032 text-right">
												<h4 class="f029">￥{$one.sumprice}</h4>
												<p class="f02 color999">订单号：{$one.order_str}</p>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="commodity-name f032">
											<ul>
												<li>
													{volist name="$one.food_list" id="el"}
														<span>{$el[0]}<em>×</em>{$el[1]}</span>--
													{/volist}
												</li>
												
												<div class="clearfix"></div>
											</ul>
										</div>
									</li>
								</ul>
								{/volist}
							</div>
							<div class="swiper-slide list-group">
								{volist name="order_list2" id="one"}
								<ul>
									<li class="bor-bottom5-f1 bg-fff">
										<div class="order-details-header">
											<div class="order-det-logo fl"><img src="__STATIC__/home/img/logo.jpg"></div>
											<div class="order-det-time fl">
												<h4>快乐小吃店</h4>
												<p>{$one.should_paytime|date="Y-m-d",###}</p>
											</div>
											<div class="my-order-iphone1 fr f032 text-right">
												<h4 class="f029">￥{$one.sumprice}</h4>
												<p class="f02 color999">订单号：{$one.order_str}</p>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="commodity-name f032">
											<ul>
												<li>
													{volist name="$one.food_list" id="el"}
														<span>{$el[0]}<em>×</em>{$el[1]}</span>--
													{/volist}
												</li>
												
												<div class="clearfix"></div>
											</ul>
										</div>
									</li>
								</ul>
								{/volist}
							</div>
							<div class="swiper-slide list-group">
								{volist name="order_list3" id="one"}
								<ul>
									<li class="bor-bottom5-f1 bg-fff">
										<div class="order-details-header">
											<div class="order-det-logo fl"><img src="__STATIC__/home/img/logo.jpg"></div>
											<div class="order-det-time fl">
												<h4>快乐小吃店</h4>
												<p>{$one.should_paytime|date="Y-m-d",###}</p>
											</div>
											<div class="my-order-iphone1 fr f032 text-right">
												<h4 class="f029">￥{$one.sumprice}</h4>
												<p class="f02 color999">订单号：{$one.order_str}</p>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="commodity-name f032">
											<ul>
												<li>
													{volist name="$one.food_list" id="el"}
														<span>{$el[0]}<em>×</em>{$el[1]}</span>--
													{/volist}
												</li>
												
												<div class="clearfix"></div>
											</ul>
										</div>
										<div class="bg-fff pay-button-myorder">
											<button class="bg99" onclick="confirmGet({$one.id});">确认收货</button>
										</div>
									</li>
								</ul>
								{/volist}
							</div>
							<div class="swiper-slide list-group">
								{volist name="order_list4" id="one"}
								<ul>
									<li class="bor-bottom5-f1 bg-fff">
										<div class="order-details-header">
											<div class="order-det-logo fl"><img src="__STATIC__/home/img/logo.jpg"></div>
											<div class="order-det-time fl">
												<h4>快乐小吃店</h4>
												<p>{$one.should_paytime|date="Y-m-d",###}</p>
											</div>
											<div class="my-order-iphone1 fr f032 text-right">
												<h4 class="f029">￥{$one.sumprice}</h4>
												<p class="f02 color999">订单号：{$one.order_str}</p>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="commodity-name f032">
											<ul>
												<li>
													{volist name="$one.food_list" id="el"}
														<span>{$el[0]}<em>×</em>{$el[1]}</span>--
													{/volist}
												</li>
												
												<div class="clearfix"></div>
											</ul>
										</div>
									</li>
								</ul>
								{/volist}
							</div>
							<div class="swiper-slide list-group">
								{volist name="order_list5" id="one"}
								<ul>
									<li class="bor-bottom5-f1 bg-fff padb03">
										<div class="order-details-header">
											<div class="order-det-logo fl"><img src="__STATIC__/home/img/logo.jpg"></div>
											<div class="order-det-time fl">
												<h4>快乐小吃店</h4>
												<p>{$one.should_paytime|date="Y-m-d",###}</p>
											</div>
											<div class="my-order-iphone1 fr f032 text-right">
												<h4 class="f029">￥{$one.sumprice}</h4>
												<p class="f02 color999">订单号：{$one.order_str}</p>
											</div>
											<div class="clearfix"></div>
										</div>
										<div class="commodity-name f032">
											<ul>
												<li>
													{volist name="$one.food_list" id="el"}
														<span>{$el[0]}<em>×</em>{$el[1]}</span>--
													{/volist}
												</li>
												
												<div class="clearfix"></div>
											</ul>
										</div>
										<div class="bg-fff pay-button-myorder">
											<button class="bg99">评价</button>
										</div>
									</li>
								</ul>
								{/volist}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-scrollbar"></div>
		</div>
		<div style="height:1.2rem;"></div>
		{include file="../application/home/view/common/footer.html"}

		<script src="__STATIC__/home/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="__STATIC__/home/js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__STATIC__/home/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $(".toggleButton").click(function(){
			  $(".toggleCon").toggle(1000);
			  });
			});
		</script>
		
		<script type="text/javascript">
			var loadFlag = true;
			var oi = 0;
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				scrollbar: '.swiper-scrollbar',
				slidesPerView: 'auto',
				mousewheelControl: true,
				freeMode: true,
				onTouchMove: function(swiper) { //手动滑动中触发
					var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
					var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;

					if(mySwiper.translate < 50 && mySwiper.translate > 0) {
						$(".init-loading").html('下拉刷新...').show();
					} else if(mySwiper.translate > 50) {
						$(".init-loading").html('释放刷新...').show();
					}
				},
				onTouchEnd: function(swiper) {
					var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
					var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
					// 上拉加载
					if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
						// console.log("已经到达底部！");

						if(loadFlag) {
							$(".loadtip").html('正在加载...');
						} else {
							$(".loadtip").html('没有更多啦！');
						}

						setTimeout(function() {
							for(var i = 0; i < 5; i++) {
								oi++;
								$(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加载出来的' + oi + '...</li>');
							}
							$(".loadtip").html('上拉加载更多...');
							mySwiper.update(); // 重新计算高度;
						}, 800);
					}

					// 下拉刷新
					if(mySwiper.translate >= 50) {
						$(".init-loading").html('正在刷新...').show();
						$(".loadtip").html('上拉加载更多');
						loadFlag = true;

						setTimeout(function() {
							$(".refreshtip").show(0);
							$(".init-loading").html('刷新成功！');
							setTimeout(function() {
								$(".init-loading").html('').hide();
							}, 800);
							$(".loadtip").show(0);

							//刷新操作
							mySwiper.update(); // 重新计算高度;
						}, 1000);
					} else if(mySwiper.translate >= 0 && mySwiper.translate < 50) {
						$(".init-loading").html('').hide();
					}
					return false;
				}
			});
			var mySwiper2 = new Swiper('.swiper-container2', {
				onTransitionEnd: function(swiper) {

					$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
					$('.swiper-container2 .swiper-slide-active').css('height', 'auto').siblings('.swiper-slide').css('height', '0px');
					mySwiper.update();

					$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
				}

			});
			$('.tab a').click(function() {

				$(this).addClass('active').siblings('a').removeClass('active');
				mySwiper2.slideTo($(this).index(), 500, false)

				$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
				$('.swiper-container2 .swiper-slide-active').css('height', 'auto').siblings('.swiper-slide').css('height', '0px');
				mySwiper.update();
			});

	layui.use('form', function () {
		var form = layui.form;
	});		
	function delOrder(id){
		var order_id = id;
		$.ajax({
			type: 'post',
			url: "/home/order/delOrder",
			data: {order_id:order_id},
			dataType: 'json',
			async: false,
			success:function(data){
				if(data.status){
					layer.msg("订单取消成功",{
						time:2000,
						icon:6
					});
					setTimeout('window.location.href="/home/order/order"',2000);
				}
			}
		});
	}

	function confirmOrder(id){
		var order_id = id;
		$.ajax({
			type: 'post',
			url: "/home/order/orderPay",
			data: {order_id:order_id},
			dataType: 'json',
			async: false,
			success:function(data){
				if(data.status){
					window.location.href="/home/order/paysuccess";
				}
			}
		});
	}

	function confirmGet(id){
		var order_id = id;
		$.ajax({
			type: 'post',
			url: "/home/order/confirmGet",
			data: {order_id:order_id},
			dataType: 'json',
			async: false,
			success:function(data){
				if(data.status){
					layer.msg("确认收货成功",{
						time:2000,
						icon:6
					});
					setTimeout('window.location.href="/home/order/order"',2000);
				}
			}
		});
	}
	</script>
</body>

</html>